<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$site_name}</title>
    <style>
        /* 在这里添加你的 CSS 样式 */
        body {
            font-family: "微软雅黑", sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            /* 背景色 */
        }

        header {
            background-color: #f0f0f0;
            /* 标题栏背景色 */
            color: #333;
            text-align: center;
            padding: 20px 0;
        }

        .footer {
            max-width: 1000px;
            /* 更宽的最大宽度 */
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            /* 内容区域背景色 */
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .container {
            max-width: 1000px;
            /* 更宽的最大宽度 */
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            /* 内容区域背景色 */
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
            display: flex;
            /* 使用 Flexbox 布局 */
            align-items: center;
            /* 垂直居中 */
        }

        .container2 {
            max-width: 1000px;
            /* 更宽的最大宽度 */
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            /* 内容区域背景色 */
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
            display: flex;
            /* 使用 Flexbox 布局 */
            align-items: center;
            /* 垂直居中 */
            flex-direction: column;
            /* 纵向布局 *
        }
        h1, h2, h3 {
            color: #333; /* 标题颜色 */
        }

        .main-image {
            flex: 1;
            /* 自动扩展填充剩余空间 */
            text-align: center;
        }

        .app-description {
            flex: 1;
            /* 自动扩展填充剩余空间 */
            padding-left: 20px;
            /* 左边距 */
        }

        .screenshots {
            margin-top: 20px;
        }

        .screenshot {
            display: inline-block;
            margin-right: 28px;
            margin-bottom: 50px;
            /* 添加底部边距 */
            transition: transform 0.3s, box-shadow 0.3s;
            /* 添加过渡效果 */
        }

        .screenshot:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* 悬停时添加阴影 */
            transform: translateY(-5px);
            /* 悬停时向上移动一点 */
        }
        /* 添加更多样式以适应你的页面 */

    </style>
</head>

<body>
<header>
    <img src="{$logo}" alt="logo" width="100">
    <h1>{$site_name}</h1>
</header>
<div class="container">
    <div class="main-image">
        <img src="{$main}" alt="主图" width="260">
    </div>
    <div class="app-description">
        <img src="{$logo}" alt="logo" width="100">
        <h2>{$site_name}</h2>
        <p>育可知，众多用户选择的心理学服务平台</p>
        <p>提供心理咨询，情绪管理，心事倾诉，情感咨询，人际交往等服务，让心理学陪伴您成长。
            在这里你可以：
            【专业心理咨询】一键预约专家，一对一私人专属咨询。涵盖情绪压力、恋爱婚姻情感、人际关系、亲子教育、职场压力、个人成长等各类问题；
            【即时倾诉】1对1，7*24小时，无需等待，随时与您信赖的心理咨询师通过文本、音频和视频发送消息；
            【心理课程】心理健康教育专家团队量身打造的系列课程，无论您是心理学专业学生、心理学爱好者、新手心理咨询师、资深心理咨询从业者还是想要走出不同人生阶段的困扰，都能通过公开课、直播课、文章、问答等形式，学习心理学知识，获得全面专业的心理咨询资源和支持，帮您在心理咨询领域从0到1快速成长。
            【心理测试】爱情测试、性格测试、情商测试等各类专业测试，帮您探索未知的自己；
            【互动心声话题社区】通过『心事信箱』、『心球说说』、『问答社区』等，您可以在这里记录心情、分享感悟，与社区成员和咨询师共同交流。关于人际关系、情感困扰、心理健康等方面的问题，您可以在这里提问讨论，一个问题多个老师多个角度进行分析，集思广益。我们鼓励您积极参与互动，相互支持，共同成长。</p>
    </div>
</div>
<div class="container2">
    <h3>页面展示</h3>
    <div class="screenshots">
        {foreach $images as $image}
        <div class="screenshot">
            <img src="./{$image}" alt="image 1" width="300">
        </div>
        {/foreach}
    </div>
</div>
<!-- 根据需要添加其他内容如联系方式、特性等 -->
<footer class="container">
    <p>Copyright&copy;<?php echo date('Y'); ?> {$site_name}版权所有
        <a href="https://beian.mps.gov.cn/#/query/webSearch" style="text-decoration: none;color: black">{$beian}</a>
    </p>
</footer>
</body>
</html>